<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改链接 - UnaBoot</title>
    <link rel="icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/font-awesome.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/ionicons.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/adminlte.css">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/layer/skin/default/layer.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/unaboot-admin.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700">
</head>
<body >
<div class="container text-sm">
    <div class="row">
        <div class="col-12 p-4">
            <form id="link-form">
                <div class="form-group">
                    <label class="col-form-label font-weight-light" for="name">名称</label>
                    <input type="text" name="name" class="form-control" id="name" value="${link.name}" autocomplete="off">
                    <p class="font-weight-light text-sm text-secondary">给连接定义一个用于显示的名称</p>
                </div>
                <div class="form-group">
                    <label class="col-form-label font-weight-light" for="url">地址</label>
                    <input type="url" name="url" class="form-control" id="url" value="${link.url}" autocomplete="off">
                    <p class="font-weight-light text-sm text-secondary">请填写静态链接的URL地址，例如：<i>https://www.ramostear.com</i></p>
                </div>
                <div class="form-group">
                    <label class="col-form-label font-weight-light" for="sortId">排序号</label>
                    <input style="width: 100px" value="${link.sortId}" type="number" min="1" step="1" class="form-control" name="sortId" id="sortId">
                    <p class="font-weight-light text-sm text-secondary">在页面中显示静态链接时，系统根据排序号对链接进行升序排列。</p>
                </div>
                <div class="fixed-bottom pl-4 pt-2 pr-4 pb-2 bg-gray-light text-right border-top">
                    <button type="button" class="btn btn-sm btn-primary" id="update"><i class="fa fa-check-circle"></i> 保存</button>
                    <button type="button"  class="btn btn-sm btn-default" id="close"><i class="fa fa-times-circle-o"></i> 取消</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="${una}/ub-admin/plugin/jquery/jquery.min.js" type="text/javascript"></script>
<script src="${una}/ub-admin/plugin/jquery/jquery.serialize.js" type="text/javascript"></script>
<script src="${una}/ub-admin/plugin/jquery/jquery.form.js"></script>
<script src="${una}/ub-admin/plugin/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="${una}/ub-admin/js/adminlte.js" type="text/javascript"></script>
<script src="${una}/ub-admin/js/unaboot-admin.core.js" type="text/javascript"></script>
<script src="${una}/ub-admin/plugin/layer/layer.js" type="text/javascript"></script>
<script src="${una}/ub-admin/js/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var form = $("#link-form");
    form.validate({
        errorPlacement: function errorPlacement(error, element) {
            element.after(error);
        },
        rules:{
            name:{
                required:true
            },
            url:{
                required:true,
                url:true
            },
            sortId:{
                required:true,
                digits:true,
                min:1
            }
        },
        messages:{
            name:{
                required:'请定义链接的名字'
            },
            url:{
                required:'请填写链接的url地址',
                url:'请检查链接地址格式是否正确'
            },
            sortId:{
                required:'请为链接设置一个排序号',
                digits:'排序号只能为整数',
                min:'排序号的值不能小于1'
            }
        }
    });

    $("#update").on("click",function(){
        var isOk = form.valid();
        if(isOk){
            var data = $("#link-form").serialize();
            var load = layer.load(2,{
                shade:[0.4,'#f0f0f0'],
                shadeClose:false
            });
            $.ajax({
                type:'POST',
                url:"${una}/admin/links/${link.id}",
                data:data,
                success:function(){
                    layer.close(load);
                    var index = parent.layer.getFrameIndex(window.name);
                    layer.alert("当前操作已成功执行!",{
                        title:"<i class='fa fa-info'></i> 提示",
                        icon:1,
                        shade:[0.4,"#fff"],
                        shadeClose:false,
                        time:0,
                        btn:['OK'],
                        yes:function(newIndex){
                            parent.layer.close(index);
                            parent.layer.close(newIndex);
                            parent.location.reload();
                        }
                    });
                },
                error:function(){
                    layer.close(load);
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.alert("当前操作失败!请稍后再试。",{
                        title:"<i class='fa fa-info'></i> 提示",
                        icon:1,
                        shade:[0.4,"#fff"],
                        shadeClose:false,
                        time:0,
                        btn:['OK'],
                        yes:function(newIndex){
                            parent.layer.close(index);
                            parent.layer.close(newIndex);
                        }
                    });
                }
            });
        }else{
            return false;
        }
    });

    $("#close").on("click",function(){
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    });
</script>
</body>
</html>